﻿<template>
  <BaseDialog
    v-model="visible"
    :title="title"
    :width="width"
    :show-footer="false"
    append-to-body
    :destroy-on-close="true"
  >
    <div class="sticky-header">您当前有 {{ list.length }} 个品牌，请选择要进入的品牌：</div>

    <div class="brand-list">
      <div
        v-for="brand in list"
        :key="brand?.customer?.id ?? brand?.id"
        class="brand-item"
        @click="selectBrand(brand?.customer?.id)"
      >
        <div class="brand-left">
          <img :src="brand?.customer?.customerLogo" class="brand-logo" />
          <div class="brand-info">
            <div class="brand-info-top">
              <span class="text-4 font-500">{{ brand?.customer?.customerName }}</span>
              <!-- 示例徽标，可按需替换/删除 -->
              <img src="@/assets/login/level-a.png" class="shop-level" />
            </div>
            <div class="brand-info-bottom">
              <el-tag size="small" type="primary">平台</el-tag>
              <span class="text-3">2026-01-12到期</span>
            </div>
          </div>
        </div>

        <div class="radio" :class="{ checked: modelSelectedId === brand?.customer?.id }">
          <span class="dot" v-if="modelSelectedId === brand?.customer?.id"></span>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="footer-actions">
        <el-button size="large" @click="handleCancel">{{ cancelText }}</el-button>
        <el-button type="primary" size="large" :disabled="!modelSelectedId" @click="handleConfirm">
          {{ confirmText }}
        </el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
  /**
   * 用法：
   * <BrandSelectDialog
   *   v-model="showDialog"
   *   :list="brandList"
   *   v-model:selectedId="selectedBrandId"
   *   @confirm="chooseAndEnter"
   * />
   *
   * 事件：
   * - update:modelValue        控制显示隐藏
   * - update:selectedId        更新选中 id
   * - confirm(selectedItem)    点击确认，抛出选中的品牌对象
   * - cancel                   点击取消
   */
  const props = defineProps({
    modelValue: { type: Boolean, default: false },
    list: { type: Array, default: () => [] },
    selectedId: { type: [String, Number], default: "" },
    title: { type: String, default: "选择品牌" },
    width: { type: String, default: "404px" },
    confirmText: { type: String, default: "确认" },
    cancelText: { type: String, default: "取消" },
  });
  const emit = defineEmits(["update:modelValue", "update:selectedId", "confirm", "cancel"]);

  const visible = computed({
    get: () => props.modelValue,
    set: v => emit("update:modelValue", v),
  });

  // 内部选中受控，支持 v-model:selectedId
  const modelSelectedId = computed({
    get: () => props.selectedId,
    set: v => emit("update:selectedId", v),
  });

  // 打开时若无选中则默认选第一项
  watch(
    () => [props.modelValue, props.list],
    ([open]) => {
      if (open && props.list?.length && !modelSelectedId.value) {
        const first = props.list[0];
        const firstId = first?.customer?.id ?? first?.id ?? "";
        if (firstId) modelSelectedId.value = firstId;
      }
    }
  );

  function selectBrand(id) {
    modelSelectedId.value = id;
  }

  function handleCancel() {
    emit("cancel");
    visible.value = false;
  }

  function handleConfirm() {
    const sel = props.list?.find(b => (b?.customer?.id ?? b?.id) === modelSelectedId.value);
    if (!sel) {
      // 全局 $msg（如已挂到 app.config.globalProperties）；
      // 若你们没有全局消息，换成 ElMessage 也可
      $msg?.warning?.("请选择一个品牌");
      return;
    }
    emit("confirm", sel);
    visible.value = false;
  }
</script>

<style scoped lang="scss">
  .sticky-header {
    position: sticky;
    top: 0;
    padding-bottom: 16px;
    font-weight: 500;
    font-size: 14px;
    z-index: 10;
  }

  .brand-list {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .brand-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--cb1);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;

      .brand-left {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--ct1);

        .brand-info {
          display: flex;
          flex-direction: column;
          gap: 4px;

          .brand-info-top {
            display: flex;
            align-items: center;
            gap: 4px;

            .shop-level {
              width: 24px;
              height: 16px;
            }
          }

          .brand-info-bottom {
            display: flex;
            align-items: center;
            gap: 8px;
          }
        }
      }

      .brand-logo {
        width: 48px;
        height: 48px;
        border-radius: 8px;
      }

      .radio {
        width: 14px;
        height: 14px;
        border: 2px solid var(--cb1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.2s;

        &.checked {
          border: 4px solid var(--bd);
        }

        .dot {
          width: 6px;
          height: 6px;
          background: #fff;
          border-radius: 50%;
        }
      }
    }
  }

  .footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
</style>
